<template>
  <!-- 角色分类 -->
  <div class="category-filters">
    <div class="category-btn" :class="{ active: selectedCategory === 'all' }" @click="selectCategory('all')">全部角色</div>
    <div v-for="category in categories" :key="category" class="category-btn"
      :class="{ active: selectedCategory === category }" @click="selectCategory(category)">
      {{ category }}
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
const props = defineProps({ categories: Array, selectedCategory: String });
const emit = defineEmits(['updateCategory']);
const selectCategory = (category) => emit('updateCategory', category);
</script>

<style scoped>
.category-filters {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.category-btn {
  padding: 10px 20px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(74, 108, 247, 0.3);
  border-radius: 25px;
  color: var(--text-muted);
  cursor: pointer;
}

.category-btn.active,
.category-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}
</style>
